<template>
	<view class="addinputPage">
		<uni-nav-bar left-icon="back" statusBar :border="false" @clickLeft="clickLeft">
			<view class="headers">所有人可见<text class="iconfont icon-shezhi"></text></view>
		</uni-nav-bar>

		<view class="addinput">
			<!-- 文本域 -->
			<textarea class="textArea" v-model="textarea" placeholder="说一句话吧" />
			<!-- 多图上传 -->
			<upload-image ref="uploadImages" @choose="choose" @change="change" :shows="shows" :listArr="imageList"></upload-image>
			<!-- 底部操作条 -->
			<view class="footerBat">
				<view class="iconfont icon-caidan" hover-class="animation_jello_5"></view>
				<view class="iconfont icon-huati" hover-class="animation_jello_5"></view>
				<view class="iconfont icon-tupian1" hover-class="animation_jello_5" @click="iconClickEvent('uploadImages')"></view>
				<view class="send" hover-class="animation_jello_5">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	import uploadImage from "@/components/common/upload-image.vue";
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
		computed:{
			// 刚开始让添加的图标隐藏起来
			shows(){
				return this.imageList.length > 0;
			},
		},
		// 监听页面返回的事件
		onBackPress() {},
		onLoad() {
			this.getStore();
		},
		data() {
			return {
				textarea: void 0,
				imageList: [],
			};
		},
		methods: {
			// 跳转页面了吧
			clickLeft() {
				// 监听返回
				if(this.textarea !== undefined || this.imageList.length !== 0){
					uni.showModal({
						content:"是否保存为草稿",
						showCancel: true,
						cancelText:"不保存",
						confirmText:"保存",
						success: res => {
							if(res.confirm){
								// 调用保存功能的方法
								this.store();
							}else{
								// 点了不保存时，清空保存记录
								uni.removeStorage({
									key:"addInput"
								})
							};
							// 返回到首页中去
							/* uni.switchTab({
								url:"../bottombar/index/index"
							}); */
							// 放回到上一个页面中
							uni.navigateBack({delta:1});
						},
					});
 				}else{
					// 放回到上一个页面中
					uni.navigateBack({delta:1});
				};
			},
			choose(e){ 
				this.imageList = e;
			},
			change(e){
				this.imageList = e;
			},
			// 保存操作
			store(){
				let obj = {
					textarea: this.textarea,
					imageList: this.imageList
				};
				uni.setStorage({
					key:"addInput",
					data: JSON.stringify(obj)
				})
			},
			// 获取保存的内容
			getStore(){
				uni.getStorage({
					key:"addInput",
					success: res =>{
						if(res.data){
							let result = JSON.parse(res.data);
							this.textarea = result.textarea;
							this.imageList = result.imageList;
						};
					}
				});
			},
			// 底部图标点击事件
			iconClickEvent(e){
				switch (e){
					case "uploadImages":
					//拿到子组件并执行子组件里面的方法
						this.$refs.uploadImages.chooseImage();
					break;
				};
			},
		}
	}
</script>

<style lang="scss">
	.headers{
		width: 100%;
		@include flexCenterCenter;
		>text{
			margin-left: 6rpx;
		}
	}
	.textArea{
		width: 100%;
		border: 1rpx solid #999999;
	}
	.footerBat{
		padding:0 20rpx;
		@include  flexCenterCenter;
		width: 100%;
		height: 60rpx;
		position: fixed;
		right: 0;
		bottom: 25rpx;
		
		>view{
			&:not(:last-of-type){
				@include flexCenterCenter;
				width: 80rpx;
				height: 100%;
				font-size: 50rpx;
			}
		}
		>.send{
			width: 140rpx;
			height: 100%;
			line-height: 60rpx;
			text-align: center;
			color: #FFFFFF;
			letter-spacing: 4rpx;
			border-radius: 8rpx;
			@include backgroundMainColor;
			margin-left: auto;
		}
	}
</style>
